<script lang="ts" setup>
import { defineOptions, ref } from 'vue';
import { ElButton } from 'element-plus';

import { basicProps } from '../props';

defineOptions({ name: 'BasicDialogFooter' });

const prorps = defineProps(basicProps);
const emit = defineEmits(['ok', 'cancel']);

function handleOk(e: Event) {
  emit('ok', e);
}

function handleCancel(e: Event) {
  emit('cancel', e);
}
const cancelButtonProps = ref(prorps.cancelButtonProps) as object;
const okButtonProps = ref(prorps.okButtonProps) as object;
</script>
<template>
  <div :class="footerClass" class="flex items-center rounded-b-[10px]">
    <slot name="insertFooter"></slot>
    <ElButton v-bind="cancelButtonProps" v-if="showCancelBtn" @click="handleCancel">
      {{ cancelText }}
    </ElButton>
    <slot name="centerFooter"></slot>
    <ElButton v-bind="okButtonProps" v-if="showOkBtn" :loading="confirmLoading" @click="handleOk">
      {{ okText }}
    </ElButton>
    <slot name="appendFooter"></slot>
  </div>
</template>
